<template>
    <div class="all">
        <div class="title">我的余额</div>
        <div class="image-box" :class="className">
            <div>
                <div class="carbox">
                    <el-carousel :interval="5000" arrow="never" indicator-position="none" :style="{ height: Altitude }">
                        <el-carousel-item :style="{ height: Altitude }">
                            <div class="image-list" :style="{ height: Altitude }">

                                <div v-for="(item, index) in data.data" :key="index + '_list'" class="image-item"
                                    :style="{ width: 'calc(100% / 5 - 20px)', height: Altitude }">
                                    <!-- <img :src="item.url"> -->
                                    <div class="image-name">
                                        <div>{{ item.name }}</div>
                                        <div class="color0">1000</div>

                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>

            </div>
        </div>
        <el-dialog title="请填写图片跳转链接" :visible.sync="show" @close="close">
            <el-form label-width="100px">
                <el-form-item label="跳转链接">
                    <el-input v-model="url"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="confirm">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div v-if="data.data.length <= 0">
            <div class="image-null"><span class="el-icon-menu"></span></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Images',
    props: ['data', 'className'],
    data() {
        return {
            navigation: [],
            num: '',
            numArray: [],
            list: {},
            url: "",
            index: null,
            show: false,
            imageIndex: null,
            link: "",
        }
    },
    computed: {
        Altitude() {
            if (this.data.data.length > 5) {
                return '170px'
            } else {
                return '100px'
            }
            // if (this.data.tabType == 1) {
            //   if (this.navigation[0].length > 3) {
            //     return '170px'
            //   } else {
            //     return '100px'
            //   }
            // } else if (this.data.tabType == 2) {
            //   if (this.navigation[0].length > 4) {
            //     return '170px'
            //   } else {
            //     return '100px'
            //   }
            // } else if (this.data.tabType == 3) {
            //   if (this.navigation[0].length > 5) {
            //     return '170px'
            //   } else {
            //     return '100px'
            //   }
            // }

        }
    },
    watch: {
        'data.data': function (newVal, oldVal) {
            // 在这里处理 data 数据变化的逻辑
            // this.getData()
        },
        'data.tabType': function (newVal, oldVal) {
            // 在这里处理 tabType 数据变化的逻辑
            this.getData()
        },
        data: {
            handler(newData, oldData) {
                // 检查 tabType 是否发生了变化  
                console.log('Prop Value changed from1', newData,);
                this.getData()
            },

            // 开启深度监听  
            deep: true
        },
    },
    mounted() {
        console.log(this.data, "datadatadata1")
        this.getData()//对数据进行修改
    },
    methods: {
        close() {
            this.show = false;
            this.url = "";
        },
        confirm() {
            this.list["data"][this.index]["link"] = this.url;
            this.close();
        },
        getData() {
            // let num = this.data.tabType == 1 ? 6 : this.data.tabType == 2 ? 8 : 10
            // let newA = []
            // newA = this.data.data.filter((item, index) => {
            //     return item.isShow == true
            // })
            // this.navigation = this.chunkArray(newA, num)
            // this.num = this.navigation.length;
            // this.numArray = this.createArr(this.num)
            // console.log(this.numArray, '1')
            // console.log(this.navigation, '2')
        },
        //将数组结构
        chunkArray(array, size) {
            const result = [];
            for (let i = 0; i < array.length; i += size) {
                result.push(array.slice(i, i + size));
            }
            return result;
        },
        createArr(num) {
            let arr = [];
            for (let i = 1; i <= num; i++) {
                arr.push(i);
            }
            return arr;
        }

    }
}
</script>

<style scoped lang="scss">
.color0 {
    width: 100%;
    height: 20px;
    color: #000;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    width: 90%;
    margin: 0 auto;

    .items {
        display: flex;
        align-items: center;

        img {
            width: 22px;
            height: 22px;
            margin-right: 14px;
        }
    }

    font-size: 14px;
    font-family: PingFang SC,
    PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;
    border-bottom: 1px solid #f5f5f5;
}

.all {
    background-color: #ffffff;
    width: 378px;
    margin: 10px auto;
    border-radius: 9px;

    .title {
        padding: 14px;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
    }
}

.title {
    width: 100%;
    height: 30rpx;
}

.btn {
    height: 40px;
    width: 80px;
}

.image-box {
    font-size: 0;
    padding: 5px 10px;


    .image-null {
        background: #ffffff;
        height: 200px;
        font-size: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c1c1c1;
        width: 100%;
    }

    .image-list {
        display: flex;
        flex-wrap: wrap;
        background-color: #ffffff;
        border-radius: 8px;
    }

    .image-item {
        width: calc(100% / 5 - 20px);
        text-align: center;
        // margin: 10px;

        img {
            width: 50px;
            height: 50px;
            max-width: 50px;
        }

        .image-name {
            font-weight: 500;
            font-size: 13px;
            color: #333333;
            height: 20px;
            margin-top: 5px;
            text-align: center;
        }
    }

    &.two {}

    &.three {}


}



.carbox {
    background-color: #ffffff;
    max-height: 200px !important;

    ::v-deep.el-carousel__container {
        height: auto;
    }

    // ::v-deep .el-carousel {
    //   .el-carousel__container {
    //     max-height: 200px !important;
    //     min-height: 80px !important;
    //     height: auto !important;

    //   }
    // }


    .image-list {
        display: flex;
        flex-wrap: wrap;

        border-radius: 8px;
    }

    .image-item {
        width: calc(100% / 4 - 20px);
        text-align: center;
        margin: 10px;
        text-align: center;

        img {
            width: 50px;
            height: 50px;
            max-width: 50px;
        }

        .image-name {
            font-weight: 500;
            font-size: 13px;
            color: #333333;
            height: 20px;
            margin-top: 5px;
            text-align: center;
        }
    }
}
</style>